<template>
  <div :style="[getWrapStyle(styles)]">
    <div>
      <img
        class="img"
        :style="{ height: styles.height + 'px' }"
        src="../../static/tiananmen.png"
      />
      <div>当前位置(仅供参考)</div>
      <div class="address">
        <img class="image" src="../../static/ditu.png" />
        <div class="text" :style="getTitleStyle1()">{{ value.address }}</div>
      </div>
    </div>
    <div class="wrap-body">
      <span class="ellipsis">
        {{ value.subtitle }}
      </span>
      <ul class="tabs">
        <li
          v-for="item in tabList"
          :key="item.id"
          class="tab-item"
          @click="$jump(item.jump)"
        >
          <img class="image" :src="item.image || defaultIamge" />
          <span class="ellipsis-1" :style="getTitleStyle1()">
            {{ item.label }}
          </span>
          <span class="ellipsis-2" :style="getTitleStyle1()">
            {{ item.jump[0] }}
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "McMap",
  props: {
    styles: {
      type: Object,
      default: () => {},
    },
    attrs: {
      type: Object,
      default: () => {},
    },
    tabList: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      defaultIamge: "../../static/user/update.png",
    };
  },

  methods: {
    getWrapStyle(target) {
      let result = {};
      for (const [key, value] of Object.entries(target)) {
        // 页面间距
        if (key == "pagePadding") {
          result["paddingLeft"] = this.$unit(value);
          result["paddingRight"] = this.$unit(value);
          continue;
        }
      }
      return result;
    },
    // 字体颜色加大小
    getTitleStyle1() {
      return {
        color: this.styles.titleColor,
        fontSize: this.$unit(this.styles.titleSize),
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  margin: 10px;
  display: flex;
  overflow: hidden;
  .text {
    margin-left: 10px;
  }
}
.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wrap-body {
  padding: 0 10px;
  margin-top: 10px;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .ellipsis {
    font-size: 20px;
    font-weight: 600;
  }
  .tabs {
    margin: 10px 0;
    .tab-item {
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      border-bottom-style: ridge;
      padding-bottom: 5px;

      .ellipsis-1 {
        display: inline-block;
        width: 100px;
        margin-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .ellipsis-2 {
        display: inline-block;
        width: 200px;
        margin-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.image {
  width: 30px;
  height: 30px;
}
</style>
